<template>
  <el-select
    v-model="value"
    v-bind="$attrs"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
    multiple
    filterable
    allow-create
    default-first-option
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
  >
    <el-option
      v-for="item in optionList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script setup lang="ts" generic="T extends object">
  import type { IFormChildProps } from '../map'
  import { itemController, loadController, EControlType } from '../map'

  defineOptions({
    name: 'nf-el-from-select-find',
    inheritAttrs: false,
  })

  const props = withDefaults(defineProps<IFormChildProps<T> & {
    collapseTags?: boolean,
    collapseTagsTooltip?: boolean
  }>(), {
    meta: () => {
      return {
        colName: '',
        controlType: EControlType.select
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true,
    collapseTags: true, // 多选
    collapseTagsTooltip: true
  })
  
  const { value  } = itemController(props)

  // 设置默认值
  if (props.meta.defValue) {
    value.value = props.meta.defValue
  }


  const options = {
    options: [{
      value: 'HTML',
      label: 'HTML'
    }, {
      value: 'CSS',
      label: 'CSS'
    }, {
      value: 'JavaScript',
      label: 'JavaScript'
    }],
    value: []
  }

  // 从后端获取数据
  const { loadDict } = loadController(props)
  loadDict()
 
</script>
